<template>
    <div class="invoice-cell">
      <div class="invoice" @click="onShowSelect">
        <div class="invoice-label">
          {{ invoiceMessage.title }}
        </div>
        <div class="invoice-select" :class="[invoiceMessage.valueClass ? invoiceMessage.valueClass : '']">
          <span>{{ invoiceMessage.value }}</span>
          <i class="iconfont icon-zhixiang ML2"></i>
        </div>
      </div>
      <!-- 发票选择器 -->
      <invoice-select :showSelect="showSelect" :invoiceInfo="invoiceInfo" :shopConf="shopConf"
        @closeSelect="showSelect = false" @getInvoiceMsg="onGetInvoiceMsg">
      </invoice-select>
    </div>
  </template>
  
  <script>
  import { isMP } from "../../utils/checkEnv";
  import invoiceSelect from "./InvoiceSelect";
  import locale from "../../../../mixins/locale";

  export default {
    name: 'InvoiceShow',
    model: {
      prop: 'invoiceInfo',
      event: "change"
    },
    mixins: [locale],
    props: {
      invoiceInfo: {
        type: Object,
        default: () => ({})
      },
      shopConf: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        invoiceMessage: {
          title: this.t('invoice_title'),
          value: this.t('invoice_no_need_invoice'),
          valueClass: "EC4",
        }, //发票内容
        showSelect: false, //是否显示发票选择器组件
        invoiceMsg: {},
      };
    },
    components: {
      invoiceSelect
    },
    mounted() {
      if (isMP) {
        let invoice = JSON.parse(localStorage.getItem('invoice'));
        invoice && invoice.payParams && (this.invoiceMsg = {
          invoiceHead: invoice.payParams.invoice_title || '',
          taxNumber: invoice.payParams.tax_number || '',
          invoiceType: invoice.payParams.invoice_type || 1,
          invoiceCategory: invoice.payParams.content_type || 1,
          invoiceEmail: invoice.payParams.email || '',
          invoiceState: invoice.payParams.is_open_invoice || 0,
          invoicePhone: invoice.payParams.invoice_phone || '',
          invoiceTaxAddress: invoice.payParams.invoice_tax_address || '',
          invoiceTaxPhone: invoice.payParams.invoice_tax_phone || '',
          invoiceTaxBank: invoice.payParams.invoice_tax_bank || '',
          invoiceTaxBankAccount: invoice.payParams.invoice_tax_bank_account || '',
        })
        this.onGetInvoiceMsg(this.invoiceMsg)
      } else {
        this.invoiceMsg = {
          invoiceHead: this.invoiceInfo.invoice_title || '',
          taxNumber: this.invoiceInfo.tax_number || '',
          invoiceType: this.invoiceInfo.invoice_type || 1,
          invoiceCategory: this.invoiceInfo.content_type || 1,
          invoiceEmail: this.invoiceInfo.email || '',
          invoiceState: this.invoiceInfo.is_open_invoice || 0,
        }
      }
      this.obtainInvoiceMessage();
    },
    methods: {
      // 打开发票选择器
      onShowSelect() {
        this.showSelect = true;
      },
      // 获得发票选择器传过来的发票信息
      onGetInvoiceMsg(val) {
        this.invoiceMsg = JSON.parse(JSON.stringify(val));//深拷贝
        this.invoiceMsg.invoiceType === 2 &&
          (this.invoiceMsg.taxNumber = "");
        let data = {
          invoice_type: this.invoiceMsg.invoiceType,
          invoice_content_type: this.invoiceMsg.invoiceCategory,
          invoice_email: this.invoiceMsg.invoiceEmail,
          invoice_title: this.invoiceMsg.invoiceHead,
          invoice_tax_number: this.invoiceMsg.taxNumber,
          is_open_invoice: this.invoiceMsg.invoiceState,
          invoice_phone: this.invoiceMsg.invoicePhone,
          invoice_tax_address: this.invoiceMsg.invoiceTaxAddress,
          invoice_tax_phone: this.invoiceMsg.invoiceTaxPhone,
          invoice_tax_bank: this.invoiceMsg.invoiceTaxBank,
          invoice_tax_bank_account: this.invoiceMsg.invoiceTaxBankAccount,
        };
        this.obtainInvoiceMessage();
        if (this.invoiceMsg.invoiceState === 0) {
          data = { is_open_invoice: 0 };
        }
        this.$emit('change', data);
      },
      // 获得发票展示信息
      obtainInvoiceMessage() {
        if (this.invoiceMsg.invoiceState === 0) {
          this.invoiceMessage.valueClass = "EC4";
        } else {
          this.invoiceMessage.valueClass = "EC1";
        }
  
        let str = "";
        let categoryArray = [this.t('invoice_categories'), this.t('invoice_detail')];
        //发票未提交
        if (this.invoiceMsg.invoiceState === 0) {
          str = this.t('invoice_no_need_invoice');
        } else if (
          //发票已提交且发票类型为个人
          this.invoiceMsg.invoiceState === 1 &&
          this.invoiceMsg.invoiceType === 2
        ) {
          str = `${this.t('invoice_plain_invoice')}(${this.t('invoice_goods')}${categoryArray[this.invoiceMsg.invoiceCategory - 1] //获取商品类别
            }-${this.t('invoice_personal')})`;
        } else {
          //发票已提交且发票类型为企业
          str = `${this.t('invoice_plain_invoice')}(${this.t('invoice_goods')}${categoryArray[this.invoiceMsg.invoiceCategory - 1] //获取商品类别
            }-${this.invoiceMsg.invoiceHead.length <= 11 //判断发票抬头长度是否超过11字节
              ? this.invoiceMsg.invoiceHead
              : this.invoiceMsg.invoiceHead.slice(0, 11) + "..."
            })`;
        }
        this.invoiceMessage.value = str;
      }
    },
  };
  </script>
  
  <style lang="scss" scoped>
  @import "../../assets/styles/global.scss";
  @import "../../assets/styles/common.scss";
  .invoice-cell {
    padding: 0 .3rem;
    background: #ffffff;
  
    .invoice {
      display: flex;
      align-items: center;
      padding: .26rem 0;
      justify-content: space-between;
      background: #ffffff;
      border-bottom: 0.01rem solid #eee;
      color: #333;
      .invoice-label{
        font-size: 0.28rem;
        color: #333;
      }
      .invoice-select{
        span, i{
          font-size: 0.28rem;
        }
      }
    }
  }
  </style>